// pages/dituxq/dituxq.js
var QQMapWx = require('../../utils/qqmap-wx-jssdk.js');
var qqmapsdk;
var app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    address: '',   //学校地图位置
    myaddress:'',//我的位置 
    markers: [],     // 实时地图标志
    poi: [],      //地图经纬度
    mypoil:'',    //旧的经纬度
    dpoi: '',    //学校经纬度
    polyline: { color: '#33FF66', width: 10, arrowLine: true, arrowIconPath:true},   //显示路线
    ymarkers: [],    //学校原定地点marker
    mymarkers:[],   //我的位置marker
    points:[],
  },

  /**
   * 生命周期函数--监听页面加载
   */

  onLoad: function(options) {
    var address = options.address;
    this.setData({
      address: address
    });
    //// 实例化API核心类
    qqmapsdk = new QQMapWx({
      key: 'ZGPBZ-OEWCV-SJDPG-U75TS-YH3Q3-DYFYX'
    });

    this.xmap(address) //获取学校的经纬度

     this.myaddress();  //获取我的位置经纬度
   
  },

  



// 路线
  myluxian:function(){
    var that = this;
    var myaddrss = that.data.mymarkers;
    that.setData({
      markers: that.data.mymarkers,
      poi: that.data.mypoil,
    })

    var start = that.data.mypoil.latitude + "," + that.data.mypoil.longitude;
    var end = that.data.ymarkers[0].latitude + "," + that.data.ymarkers[0].longitude;

    console.log(start)
    console.log(end)

  
    qqmapsdk.direction({
      mode: 'driving',//可选值：'driving'（驾车）、'walking'（步行）、'bicycling'（骑行），不填默认：'driving',可不填
      //from参数不填默认当前地址
      from: start,
      to: end ,
      success: function (res) {
        console.log(res);
        var ret = res;
        var coors = ret.result.routes[0].polyline, pl = [];
        //坐标解压（返回的点串坐标，通过前向差分进行压缩）
        var kr = 1000000;
        for (var i = 2; i < coors.length; i++) {
          coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
        }
        //将解压后的坐标放入点串数组pl中
        for (var i = 0; i < coors.length; i += 2) {
          pl.push({ latitude: coors[i], longitude: coors[i + 1] })
        }
        console.log(pl)
        //设置polyline属性，将路线显示出来,将解压坐标第一个数据作为起点
        that.setData({
          poi:{
            latitude: pl[0].latitude,
            longitude: pl[0].longitude,
          },
          polyline: [{
            points: pl,
            color: '#FF0000DD',
            width: 4,
            arrowLine:true,
          }]
        })
      },
      fail: function (error) {
        console.error(error);
      },
      complete: function (res) {
        console.log(res);
      }
    });
  },

// 获取我的位置
 myaddressd:function(){
   wx.showToast({
     title: '我的位置获取中',
     icon: 'none',
     duration: app.data.quanbushijian
   })

   var that = this;
   that.setData({
     ymarkers: that.data.markers,
     dpoi: that.data.poi,
     markers: that.data.mymarkers,
     poi: that.data.mypoil
   })
   wx.hideLoading()
   console.log(that.data.ymarkers)
   console.log(that.data.mymarkers)

   
 },

  //封装获取我的地址经纬度方法；
  myaddress: function() {
    var that = this;
    wx.getLocation({
      type: 'wgs84',
      success: function(res) {
        var addressd;
        //根据坐标获取当前位置名称，显示在顶部:腾讯地图逆地址解析
        qqmapsdk.reverseGeocoder({
          location: {
            latitude: res.latitude,
            longitude: res.longitude
          },
          success: function (address) {
            addressd = address.result.address;
            that.setData({
              myaddress: addressd,
            })
          },
        })
        wx.showToast({
          title: '地图加载中',
          icon:'none',
          duration: app.data.quanbushijian
        })

      setTimeout(function(){
          that.setData({
            mymarkers: [{
              id: 0,
              title: that.data.myaddress,
              latitude: res.latitude,
              longitude: res.longitude,
              iconPath: app.data.url +'/uploads/zhongxue/webmyzuobiao.png', //图标路径
              width: 20,
              height: 20,
              label: {
                content: that.data.myaddress,
                color: '#993333',
                fontSize: 10,
                bgColor: '#FFFFFF',
                padding: 3,
                borderRadius: 5,
              },
            }],
            mypoil: { //根据自己data数据设置相应的地图中心坐标变量名称
              latitude: res.latitude,
              longitude: res.longitude
            }
          })
  
      },2000);


       wx.hideLoading()
      }
    })
  },



  //封装获取学校位置经纬度的方法
 xmap: function(address) {
    var that = this;
    var addres = address;
    qqmapsdk.geocoder({
      address: addres,
      success: function(res) {
        var res = res.result;
        var title = res.title;
        var latitude = res.location.lat;
        var longitude = res.location.lng;
        setTimeout(function () {
        that.setData({
          markers:[{
            id: 0,
            title: res.title,
            latitude: latitude,
            longitude: longitude,
            iconPath: app.data.url +'/uploads/zhongxue/xzuobiao.png', //图标路径
            width: 20,
            height: 20,
            label: {
              content: res.title,
              color: '#993333',
              fontSize: 10,
              bgColor: '#FFFFFF',
              padding: 5,
              // borderColor: "#993333",
              // borderWidth: 0.5,

            },
            callout: { //可根据需求是否展示经纬度  // 冒泡
              content: res.title,
              //   color: '#993333',
              //   fontSize: 10,

            }
          }],
          poi: { //根据自己data数据设置相应的地图中心坐标变量名称
            latitude: latitude,
            longitude: longitude
          },
        })
        }, 2000);

      
     setTimeout(function(){
       that.setData({
         ymarkers: that.data.markers,
         dpoi: that.data.poi,
       })
       console.log(that.data.ymarkers)
       console.log(that.data.dpoi)
     },3000)
        
       
      }

      
    })
  },
  
  //显示学校位置
   myxuexiao:function(){

     wx.showToast({
       title: '从新获取学校',
       icon: 'none',
       duration:app.data.quanbushijian
     })

     var address = this.data.address;
     this.xmap(address); //获取学校的经纬度
     this.setData({
       markers: this.data.ymarkers,
       poi: this.data.dpoi,
     }) 

     wx.hideLoading()
  },



  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {



  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

   
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {
    return {
      path: '/pages/indexfirst/indexfirst',
    }
  }
})